<!doctype html>
<html lang="en">
	<head>
		<!-- Required meta tags -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- Bootstrap CSS -->
		<link rel="stylesheet" type="text/css" href="assets/lib/bootstrap/css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="assets/lib/swiper/css/swiper-bundle.min.css" />
		<link rel="stylesheet" href="./assets/css/style.css">
		<link rel="stylesheet" href="./assets/fonts/font_3913673_8kwd9vlespd/iconfont.css">
		<title>账户设置</title>
	</head>
	<body>
		<div class="page-top w-100 bg-dark">
			<div class="container">
				<nav class="navbar navbar-expand-lg navbar-light  bg-dark">
					<div class="container-fluid ">
						<a class="navbar-brand text-white" href="#">听雨轩</a>
						<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
							data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false"
							aria-label="Toggle navigation">
							<span class="navbar-toggler-icon"></span>
						</button>
						<div class="collapse navbar-collapse" id="navbarText">
							<ul class="navbar-nav me-auto mb-2 mb-lg-0">
								<li class="nav-item">
									<a class="nav-link active text-secondary" aria-current="page" href="#">科技</a>
								</li>
								<li class="nav-item">
									<a class="nav-link text-secondary" href="#">娱乐</a>
								</li>
								<li class="nav-item">
									<a class="nav-link text-secondary" href="#">编程</a>
								</li>
							</ul>
							<div class="dropdown ">
								<a class="btn dropdown-toggle text-secondary bg-dark" href="#" role="button"
									id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
									papi酱
								</a>

								<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
									<li><a class="dropdown-item" href="#">我的消息</a></li>
									<li><a class="dropdown-item" href="#">账户设置</a></li>
									<li><a class="dropdown-item mt-2 mb-2 border-top" href="#">退出登录</a></li>
								</ul>
							</div>
						</div>
					</div>
				</nav>

			</div>
		</div>


		<nav aria-label="breadcrumb ">
			<div class="container">
				<ol class="breadcrumb mt-3">
					<li class="breadcrumb-item"><a href="#">主页</a></li>
					<li class="breadcrumb-item active" aria-current="page">用户中心</li>
				</ol>
			</div>

		</nav>
		<div class="page-usercenter  position-relative">
			<div class="container d-flex">
				<div class="card h-25" style="width: 18rem;">
					<div class="card-header">
						用户中心
					</div>
					<ul class="list-group list-group-flush">
						<a href="" class="text-decoration-none list-group-item">
						<span class="iconfont icon-personal_affairs"></span>	账户资料</a>
						<a href="" class="text-decoration-none list-group-item ">
						<span class="iconfont icon-Key"></span>	修改密码</a>
						<a href="" class="text-decoration-none list-group-item ">
						<span class="iconfont icon-xiaoxi"></span>	我的信息</a>

					</ul>

				</div>
				<div class="card card-usercenter ms-3">
					<div class="card-header">
						用户中心
					</div>
					<div class="card-body ">

						<img src="./assets/img/avatar.jpg" class=" picture mx-auto d-block mb-5  " alt="...">
						<form>
							<div class="row mb-3 justify-content-center ">
								<label for="inputEmail3" class="col-sm-1 col-form-label ">账号:</label>
								<div class="col-sm-5">
									<input type="email" class="form-control" id="inputEmail3">
								</div>
							</div>


							<div class="row mb-3 justify-content-center  ">
								<label for="inputPassword3" class="col-sm-1 col-form-label">昵称:</label>
								<div class="col-sm-5">
									<input type="password" class="form-control" id="inputPassword3">
								</div>
							</div>

							<div class="row mb-3 justify-content-center">
								<label for="inputPassword3" class="col-sm-1 col-form-label">性别:</label>
								<div class="col-sm-5 pt-2">
									<div class="form-check form-check-inline">
										<input class="form-check-input" type="radio" name="inlineRadioOptions"
											id="inlineRadio1" value="option1">
										<label class="form-check-label" for="inlineRadio1">男</label>
									</div>
									<div class="form-check form-check-inline">
										<input class="form-check-input" type="radio" name="inlineRadioOptions"
											id="inlineRadio2" value="option2">
										<label class="form-check-label" for="inlineRadio2">女</label>
									</div>


								</div>
							</div>
							<div class="row mb-3 justify-content-center">
								<label for="inputPassword3" class="col-sm-1 col-form-label">手机:</label>
								<div class="col-sm-5">
									<input type="password" class="form-control" id="inputPassword3">
								</div>
							</div>
							<div class=" ">
								<button type="submit"
									class="btn btn-primary btn-register btn-change mb-5 ">保存修改</button>
							</div>

					</div>
				</div>
			</div>

		</div>




		<div class="page-bottom bg-dark">
			<div class="container ">
				<nav class=" bg-dark mt-5">

					<h1 class=" text-white fs-4 pt-4" href="#">友情链接</h1>


					<p class="d-flex justify-content-start pt-2  ">
						<a class="nav-link active  text-white pe-3  " aria-current="page" href="#">Active</a>
						<a class="nav-link  text-white pe-3" href="#">link</a>
						<a class="nav-link  text-white pe-3" href="#">link</a>
						<a class="nav-link disabled  text-white" href="#" tabindex="-1"
							aria-disabled="true">Disabled</a>
					</p>
					<p class="d-flex justify-content-end text-white py-3 mb-0">
						COPYRIGHT(@)2023 mo8e5_3428-博客网站
					</p>

				</nav>
			</div>
		</div>


		<script src="assets/lib/bootstrap/js/bootstrap.bundle.min.js"></script>
		<script src="assets/lib/swiper/js/swiper-bundle.min.js"></script>
		<script>
			var mySwiper = new Swiper('.banner-box', {
				loop: true, // 循环模式选项
				// 如果需要分页器
				pagination: {
					el: '.swiper-pagination',
				},

				// 如果需要前进后退按钮
				navigation: {
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev',
				},
				on: {
					init: function(swiper) {
						slide = this.slides.eq(0);
						slide.addClass('ani-slide');
					},
					transitionStart: function() {
						for (i = 0; i < this.slides.length; i++) {
							slide = this.slides.eq(i);
							slide.removeClass('ani-slide');
						}
					},
					transitionEnd: function() {
						slide = this.slides.eq(this.activeIndex);
						slide.addClass('ani-slide');

					},
				}
			});
		</script>

	</body>
</html>
